<template>
    <div>
        <a-modal v-model:visible="show" :ok-loading="props.loading" :maskClosable="props.maskClosable" :closable="props.closable" :ok-text="props.okText" :cancel-text="props.cancelText" :hide-cancel="props.hideCancel" @ok="handleOk" @cancel="handleCancel">
            <template #title>
                {{title }}
            </template>
            <div v-if="content">{{content }}</div>
            <slot name="self" v-else></slot>
        </a-modal>
    </div>
</template>
<script setup>
import {ref,watch} from 'vue'
const show = ref(false)
const emit =defineEmits(['ok','cancel','update:visible'])
const props =defineProps({
    title:{type:String,default:'系統提示'},
    content:{type:String,default:''},
    visible:{type:Boolean,default:false},
    closable:{type:Boolean,default:true},
    okText:{type:String,default:'確定'},
    cancelText:{type:String,default:'取消'},
    hideCancel:{type:Boolean,default:false},
    maskClosable:{type:Boolean,default:true},
    loading:{type:Boolean,default:false},
})
watch(
  () => props.visible,
    (val) => {
    console.log('222',val);
    show.value = val
  },
  { immediate: true }
)

watch(show, (val) => {
  emit('update:visible', val)
})
const handleOk = () => {
    emit('ok')
}
const handleCancel=()=>{
    emit('cancel')
}
</script>